<template>
	<view class="main">
		<common-nav-bar home cart category my viewed sticky :isOrder="true">
			<view slot="content">我的订单</view>
		</common-nav-bar>
		<view class="order_header away-top ">
			<view class="title">
				<view :class="activedIndex == 0 ? 'isActived' : ''" @click="activedIndex = 0">
					全部
				</view>
				<view :class="activedIndex == 1 ? 'isActived' : ''" @click="activedIndex = 1">
					待付款
				</view>
				<view :class="activedIndex == 2 ? 'isActived' : ''" @click="activedIndex = 2">
					待收货
				</view>
				<view :class="activedIndex == 3 ? 'isActived' : ''" @click="activedIndex = 3">
					已完成
				</view>
				<view :class="activedIndex == 4 ? 'isActived' : ''" @click="activedIndex = 4">
					已取消
				</view>
			</view>
		</view>
		<scroll-view :show-scrollbar="false" class="box away-top">
			<order-pay v-if="activedIndex == 1 || activedIndex == 0" @empty="isPayEmpty" :activedIndex="activedIndex" />
			<order-receive v-if="activedIndex == 2 || activedIndex == 0" @empty="isReceiveEmpty"
				:activedIndex="activedIndex" />
			<order-completed v-if="activedIndex == 3 || activedIndex == 0" @empty="isCompletedEmpty"
				:activedIndex="activedIndex" />
			<order-cancel v-if="activedIndex == 4 || activedIndex == 0" @empty="isCancelEmpty"
				:activedIndex="activedIndex" />
		</scroll-view>
		<empty v-show="isEmpty" style="background-color: rgb(242, 242, 242)" description="空空如也" />
	</view>
</template>

<script>
	import Search from "components/common/Search/Search";
	import CommonNavBar from "components/common/NavBar/CommonNavBar";

	import Empty from "@/components/common/Empty/Empty";
	import OrderCancel from "./OrderCancel";
	import OrderReceive from "./OrderReceive";
	import OrderPay from "./OrderPay";
	import OrderCompleted from "./OrderCompleted";
	import {
		mapMutations,
		mapState
	} from "vuex";


	export default {
		components: {
			Search,
			CommonNavBar,
			OrderCancel,
			OrderReceive,
			OrderPay,
			OrderCompleted,
			Empty
		},
		data() {
			return {
				activedIndex: null,
				empty: false,
				payEmpty: false,
				receiveEmpty: false,
				completedEmpty: false,
				cancelEmpty: false,
				refreSher: null,
			};
		},

		onLoad({
			tag
		}) {

			console.log('tag', tag, 'orderIndex', this.orderIndex);
			if (this.orderIndex != -1) {
				this.$set(this, 'activedIndex', this.orderIndex);
			} else {
				this.$set(this, 'activedIndex', tag);
			}
		},
		watch: {
			activedIndex(newV) {
				this.setOrderIndex(newV);
			}
		},
		computed: {
			...mapState(["orderIndex"]),
			isEmpty() {
				return (
					this.payEmpty &&
					this.receiveEmpty &&
					this.completedEmpty &&
					this.cancelEmpty &&
					this.activedIndex == 0
				);
			},
		},
		methods: {
			...mapMutations(["setOrderIndex"]),
			isPayEmpty(v) {
				this.payEmpty = v;
			},
			isReceiveEmpty(v) {
				this.receiveEmpty = v;
			},
			isCompletedEmpty(v) {
				this.completedEmpty = v;
			},
			isCancelEmpty(v) {
				this.cancelEmpty = v;
			},

		},
	};
</script>
<style lang="scss" scoped>
	.main {
		width: 100vw;
		background-color: rgb(242, 242, 242);
	}

	.order_header {
		width: 100vw;
		display: flex;
		flex-direction: column;
		padding: 2vh 2vw;
		background-color: white;
		justify-content: center;
		align-items: center;
		height: 6.3vh;
		box-sizing: border-box;
		position: fixed;
		top: 90rpx;
		z-index: 2;
	}

	.search {
		width: 100%;
		border-radius: 36rpx;
	}

	.title {
		display: flex;
		flex-direction: row;
		width: 90vw;
		justify-content: space-around;
		box-sizing: border-box;
		font-size: 32rpx;
	}

	.isActived {
		border-bottom: 4rpx solid red;
	}

	.box {
		padding-top: 13.4vh;
	}
</style>
